<template>
    <div class="setting-container">
        <el-card>
            <template #header>
                <div class="card-header">
                    <div class="header-left">
                        <el-icon class="header-icon">
                            <Setting />
                        </el-icon>
                        <span>模型设置</span>
                    </div>
                </div>
            </template>

            <el-table :data="modelList" style="width: 100%" v-loading="loading" :header-cell-style="{
                background: '#f5f7fa',
                color: '#606266',
                fontWeight: 500
            }">
                <el-table-column prop="id" label="ID" width="50" />
                <el-table-column prop="type" label="类型" align="center">
                    <template #default="{ row }">
                        <el-tag :type="getModelTypeTag(row.type)">
                            {{ getModelTypeLabel(row.type) }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="model" label="模型名称" />
                <el-table-column prop="temperature" label="温度" align="center" />
                <el-table-column prop="topK" label="TopK" align="center" />
                <el-table-column prop="threshold" label="相似度阈值" align="center" />
                <el-table-column label="操作" width="150" fixed="right">
                    <template #default="{ row }">
                        <el-button type="primary" link @click="handleEdit(row)">
                            <el-icon>
                                <Edit />
                            </el-icon>编辑
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <!-- 编辑对话框 -->
        <el-dialog title="编辑模型" v-model="dialogVisible" width="700px"
            :body-style="{ maxHeight: '60vh', overflowY: 'auto' }">
            <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
                <el-form-item label="模型名称" prop="model">
                    <el-input v-model="form.model" />
                </el-form-item>
                <el-form-item label="ApiKey" prop="apiKey">
                    <el-input v-model="form.apiKey" />
                </el-form-item>
                <el-form-item label="温度" prop="temperature">
                    <el-input-number v-model="form.temperature" :min="0" :max="1" :step="0.1" />
                </el-form-item>
                <el-form-item label="topK" prop="topK">
                    <el-input-number v-model="form.topK" :min="1" :max="10" />
                </el-form-item>
                <el-form-item label="相似度阈值" prop="threshold">
                    <el-input-number v-model="form.threshold" :min="0" :max="1" :step="0.1" />
                </el-form-item>
                <el-form-item label="系统提示词" prop="defaultSystem" class="full-width-textarea-item">
                    <el-input v-model="form.defaultSystem" type="textarea" :rows="8" :cols="50" placeholder="请输入提示词" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleSubmit" :loading="submitting">
                    确定
                </el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Setting, Edit } from '@element-plus/icons-vue'
import request from '@/utils/request'

const loading = ref(false)
const modelList = ref([])
const dialogVisible = ref(false)
const formRef = ref(null)
const submitting = ref(false)

const form = ref({
    id: null,
    model: '',
    apiKey: '',
    temperature: 0.7,
    type: 0,
    defaultSystem: '',
    topK: 5,
    threshold: 0.7
})

const rules = {
    model: [
        { required: true, message: '请输入模型名称', trigger: 'blur' }
    ],
    apiKey: [
        { required: true, message: '请输入API密钥', trigger: 'blur' }
    ],
    temperature: [
        { required: true, message: '请输入温度值', trigger: 'blur' }
    ],
    topK: [
        { required: true, message: '请输入TopK值', trigger: 'blur' }
    ],
    threshold: [
        { required: true, message: '请输入相似度阈值', trigger: 'blur' }
    ]
}

// 获取模型列表
const getModelList = async () => {
    loading.value = true
    try {
        const res = await request({
            url: '/model/list',
            method: 'get'
        })
        modelList.value = res.data
    } catch (error) {
        console.error('获取模型列表失败:', error)
    } finally {
        loading.value = false
    }
}

// 获取模型类型标签
const getModelTypeLabel = (type) => {
    const typeMap = {
        0: '体质检测模型',
        1: '对话模型',
        2: '舌诊模型'
    }
    return typeMap[type] || '未知'
}

// 获取模型类型标签样式
const getModelTypeTag = (type) => {
    const typeMap = {
        0: 'success',
        1: 'primary',
        2: 'warning'
    }
    return typeMap[type] || 'info'
}

// 编辑模型
const handleEdit = (row) => {
    form.value = { ...row }
    dialogVisible.value = true
}

// 提交表单
const handleSubmit = async () => {
    if (!formRef.value) return

    try {
        await formRef.value.validate()
        submitting.value = true

        await request({
            url: '/model',
            method: 'put',
            data: form.value
        })

        ElMessage.success('更新成功')
        dialogVisible.value = false
        getModelList()
    } catch (error) {
        console.error('更新失败:', error)
    } finally {
        submitting.value = false
    }
}

onMounted(() => {
    getModelList()
})
</script>

<style scoped>
.setting-container {
    padding: 20px;
    height: 100%;
}

.el-card {
    height: 100%;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 500;
}

.header-icon {
    font-size: 18px;
    color: #409EFF;
}

.full-width-textarea-item .el-textarea {
    width: 100%;
}
</style>
